<template>
  <div class="liaoshouye">
    <header class="liao_header">
      <span class="liao_kong"></span>
      <span class="liao_center">{{liao}}</span>
      <img src="../assets/img/liao_bian.png" class="liao_imgs">
    </header>
    <section class="liao_section">
        <img src="../assets/img/banner.png">
        <ul class="liao_lists">
            <li>
              <p><img src="../assets/img/liao_hot.png"></p>
              <span><router-link to='huodong'>{{hot}}</router-link></span>
            </li>
            <li class="liaoclear">
              <p><img src="../assets/img/liao_zan.png"></p>
              <span><router-link to='shou'>{{huo}}</router-link></span>
            </li>
        </ul>
        <div class="liaopeople">{{people}}</div>
        <div class="liaopepoe">
          <dl>
            <dt><router-link to='lianxi'><img src="../assets/img/peopleone.png"></router-link></dt>
            <dd>{{peoplename}}</dd>
          </dl>
          <dl>
            <dt><router-link to='lianxi'><img src="../assets/img/peopletwo.png"></router-link></dt>
            <dd>{{peoplename}}</dd>
          </dl>
          <dl>
            <dt><router-link to='lianxi'><img src="../assets/img/peopletreen.png"></router-link></dt>
            <dd>{{peoplename}}</dd>
          </dl>
          <dl>
            <dt><router-link to='lianxi'><img src="../assets/img/peopletwo.png"></router-link></dt>
            <dd>{{peoplename}}</dd>
          </dl>
          <dl>
            <dt><router-link to='lianxi'><img src="../assets/img/peopletreen.png"></router-link></dt>
            <dd>{{peoplename}}</dd>
          </dl>
        </div>
        <div class="liaopepoe">
          <dl>
            <dt><router-link to='lianxi'><img src="../assets/img/peopleone.png"></router-link></dt>
            <dd>{{peoplename}}</dd>
          </dl>
          <dl>
            <dt><router-link to='lianxi'><img src="../assets/img/peopletwo.png"></router-link></dt>
            <dd>{{peoplename}}</dd>
          </dl>
          <dl>
            <dt><router-link to='lianxi'><img src="../assets/img/peopletreen.png"></router-link></dt>
            <dd>{{peoplename}}</dd>
          </dl>
          <dl>
            <dt><router-link to='lianxi'><img src="../assets/img/peopletwo.png"></router-link></dt>
            <dd>{{peoplename}}</dd>
          </dl>
          <dl>
            <dt><router-link to='lianxi'><img src="../assets/img/peopletreen.png"></router-link></dt>
            <dd>{{peoplename}}</dd>
          </dl>
        </div>
        <div class="speakpeople">
          <div class="bottomline">
            <div class="tou">
              <img src="../assets/img/speak.png">
              <div>
                <p>{{liaoname}}</p>
                <p class="fontgruy">{{time}}</p>
              </div>
            </div>
            <p class="xilie">{{pinglun}}</p>
            <div class="ping"><img src="../assets/img/pinglun.png"></div>
            <div class="pingRight">
              <a><img src="../assets/img/talk.png"><span>0</span></a>
              <a><img src="../assets/img/zan.png"><span>0</span></a>
            </div>
          </div>
          <div class="bottomline">
            <div class="tou">
              <img src="../assets/img/speak.png">
              <div>
                <p>{{liaoname}}</p>
                <p class="fontgruy">{{time}}</p>
              </div>
            </div>
            <p class="xilie">{{pinglun}}</p>
            <div class="ping"><img src="../assets/img/pinglun.png"></div>
            <div class="pingRight">
              <a><img src="../assets/img/talk.png"><span>0</span></a>
              <a><img src="../assets/img/zan.png"><span>0</span></a>
            </div>
          </div>
           
           <div class="bottomline">
            <div class="tou">
              <img src="../assets/img/speak.png">
              <div>
                <p>{{liaoname}}</p>
                <p class="fontgruy">{{time}}</p>
              </div>
            </div>
            <p class="xilie">{{pinglun}}</p>
            <div class="ping"><img src="../assets/img/pinglun.png"></div>
            <div class="pingRight">
              <a><img src="../assets/img/talk.png"><span>0</span></a>
              <a><img src="../assets/img/zan.png"><span>0</span></a>
            </div>
          </div>
        </div>
    </section>
    <footer class="shouye-footer">
    <ul>
      <li><router-link to='shouye'><img src="../assets/img/mifang.png"><span>秘方</span></router-link></li>
      <li><router-link to='chufang'><img src="../assets/img/chufang.png"><span>厨房</span></router-link></li>
      <li><router-link to='liaoshouye'><img src="../assets/img/liaoliaoshouye.png"><span>聊聊</span></router-link></li>
      <li><router-link to='weidenglu'><img src="../assets/img/wode.png"><span>我的</span></router-link></li>
    </ul>
  </footer>

  </div>
</template>

<script>
export default {
  name: 'liaoshouye',
  data () {
    return {
      liao: '聊聊',
      hot: '热门活动',
      huo: '最火帖子',
      people: '聊聊达人',
      peoplename: '李凯峰',
      liaoname: '老街。',
      time: '2017/04/20 21:33:25',
      pinglun: '#酱料系列#'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import '../assets/css/common.css';
  @import '../assets/less/common.less';
  @import '../assets/less/liaoshouye.less';
  @import url(../assets/less/shouye-header.less);
</style>
